<template>
  <div>
    <el-tooltip effect="dark" placement="top-start" :open-delay="600" :disabled="!isLarge">
      <div slot="content">
        <p v-if="!row.dir" class="tooltip-word">文件大小：{{ formatFileSize(row) }}</p>
        <p class="tooltip-word">修改时间：{{ row.modify_time }}</p>
      </div>
      <span @click="previewFile" :class="['name-icon', handleClass(row)]">{{ row.name }}</span>
    </el-tooltip>
    <el-dialog height="600px" :visible.sync="showPreview" :hideClose="true">
      <img class="preview-media" :src="showPreviewSrc" alt="" v-if="handleClass(this.row) == 'pic'" />
      <video :src="showPreviewSrc" v-if="handleClass(this.row) == 'video'" controls class="preview-media" />
      <audio :src="showPreviewSrc" v-if="handleClass(this.row) == 'voice'" controls class="preview-media" />
      <div v-if="handleClass(this.row) != 'pic' && handleClass(this.row) != 'video' && handleClass(this.row) != 'voice'">
        <!--
          :style="{ height: `${h}px` }" -->
        <code-editor ref="jsonEditor" class="editor" :mode="handleClass(this.row)" :isLook="true" v-model="fileContent" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="none-type" @click="onClose">关闭</el-button>
        <el-button class="none-type" @click="up">上一张</el-button>
        <el-button class="none-type" @click="next">下一张</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getDownloadKey, previewFile } from "@/api/file"
import { Base64 } from "js-base64";
import { zipFormat, mediaFormat } from "@/utils/maps";
import CodeEditor from "../../CodeEditor";
import { domain } from "@/config";
export default {
  name: "showPreview",
  data() {
    return {
      showPreview: false,
      showPreviewSrc: '',
      myInfo: {},
      fileContent: '',
      currData: null,
      currIndex: null,
    };
  },
  watch: {
  },

  components: {
    CodeEditor
  },
  props: ['row', 'islook', 'tableData', 'index', 'is_public', 'isLarge'],
  async created() {
    this.myInfo = await this.$myInfo(this)
    this.currData = this.row
    console.log('this.currData',this.currData);
    
    console.log("xxxxxx", this.currData.name)
    this.currIndex = this.index
  },
  methods: {
    next() {
      if (this.currIndex < (this.tableData.length - 1)) {
        this.currIndex++
      }      
      this.currData = this.tableData[this.currIndex]
      console.log('this.currData',this.currData);
      
      this.previewFiles()
      this.$nextTick();
    },
    up() {
      if (this.currIndex > 0) {
        this.currIndex--
      }
      console.log("this.currIndex", this.currIndex)
      this.currData = this.tableData[this.currIndex]
      this.previewFiles()
      this.$nextTick();

    },
    onClose() {
      this.showPreview = false
    },
    async showStreaming() {
      console.log('this.currData.path.split(this.currData.biz_id)[1]',this.currData.path.split(this.currData.biz_id)[1]);
      
      let key = await getDownloadKey({
        biz_id: this.currData.biz_id,
        cache_expire_type: "temporary",
        relative_paths: [this.currData.path.split(this.currData.biz_id)[1]],
        temporary_expire_duration: 5000,
        type: this.currData.type,
        use_os_command_to_compress: true,
        user_id: this.is_public ? 'public' : this.myInfo.id,
        is_cross_user_dir: this.is_public,
        with_src_dir: true
      })
      this.showPreviewSrc = `${domain}file/v1/file/download?fileId=${key.data.file_id}`
      console.log('this.showPreviewSrc',this.showPreviewSrc);
      
      this.showPreview = true
      return
    },
    async showText() {
      if (this.currData.size > 1024 * 1024 * 2) {
        this.$message.warning('暂不支持2M以上文件在线预览')
        return
      }
      let encodedRelativePath = encodeURIComponent(Base64.encode(this.currData.path.split(this.currData.biz_id)[1]))
      let res = await previewFile({
        bizId: this.currData.biz_id,
        encodedRelativePath,
        type: this.currData.type,
        userId: this.is_public ? 'public' : this.myInfo.id,
        is_cross_user_dir: this.is_public,
      })
      this.fileContent = res

      this.showPreview = true
      return
    },
    async previewFile() {
      this.currData = this.row
      if (this.islook) return
      if (this.currData.dir) return
      if (zipFormat[this.row.suffix]) return
      let type = this.handleClass(this.currData)
      console.log("type", this.currData, type)
      if (type == 'pic' || type == 'video' || type == 'voice') {
        await this.showStreaming().then(()=>{
          this.$nextTick();
        })
      } else {
        await this.showText().then(()=>{
          this.$nextTick();
        })
      }
    },
    async previewFiles() {
      // this.currData = this.row
      if (this.islook) return
      if (this.currData.dir) return
      if (zipFormat[this.row.suffix]) return
      let type = this.handleClass(this.currData)
      console.log("type", this.currData, type)
      if (type == 'pic' || type == 'video' || type == 'voice') {
        await this.showStreaming().then(()=>{
          this.$nextTick();
        })
      } else {
        await this.showText().then(()=>{
          this.$nextTick();
        })
      }
    },
    handleClass({ dir, suffix }) {
      if (dir) return "dir";
      if (zipFormat[suffix]) return "zip";
      if (mediaFormat[suffix]) return mediaFormat[suffix]
      return "text";
    },
    formatFileSize({ size, dir }) {
      if (dir) {
        return '-'
      }
      if (size < 1024) {
        return size + "B";
      } else if (size < 1024 * 1024) {
        let temp = size / 1024;
        temp = temp.toFixed(2);
        return temp + "KB";
      } else if (size < 1024 * 1024 * 1024) {
        let temp = size / (1024 * 1024);
        temp = temp.toFixed(2);
        return temp + "MB";
      } else {
        let temp = size / (1024 * 1024 * 1024);
        temp = temp.toFixed(2);
        return temp + "GB";
      }
    },
  },
};
</script>

<style scoped>
.name-icon {
  padding-left: 28px;
  cursor: pointer;
  background: url(~@/assets/img/file-icon/text.png) no-repeat;
  background-size: auto 20px;
  width: 100%;
  height: 20px;
  line-height: 20px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dir {
  background: url(~@/assets/img/file-icon/dir.png) no-repeat;
  background-size: 22px 22px;
}

.zip {
  background: url(~@/assets/img/file-icon/zip.png) no-repeat;
  background-size: 22px 22px;
}

.pic {
  background: url(~@/assets/img/file-icon/pic.png) no-repeat;
  background-size: 22px 22px;
  height: 600px;
}

.video {
  background: url(~@/assets/img/file-icon/video.png) no-repeat;
  background-size: 22px 22px;
}

.voice {
  background: url(~@/assets/img/file-icon/voice.png) no-repeat;
  background-size: 22px 22px;
}

.editor {
  min-height: 400px;
}

.preview-media {
  width: 100%;
  display: block;
  margin: 0 auto;
}

.tooltip-word {
  color: #FFF;
}
</style>
